<template>
  <view class="container">
    <img class="bac1" src="@/static/bac1.png" alt="bac1">
    <!-- 循环显示花朵 -->
    <view v-for="(flower, index) in flowers" :key="index" class="flower-item">
      <image class="flower-image" :src="flower.image" alt="flower"></image>
      <view class="flower-info">
        <text class="flower-name">种子名称：{{ flower.name }}</text>
        <br>
        <text class="flower-price">种子价格：{{ flower.price }}元</text>
          <button class="buy-button" @click="buyFlower(flower)">购买</button>
      </view>
    </view>
    <!-- 弹窗 -->
    <view class="modal" v-if="showModal">
      <view class="modal-content">
        <text>购买数量：</text>
        <input type="number" v-model="quantity" min="1">
        <button @click="confirmPurchase">确认购买</button>
        <button @click="cancelPurchase">取消</button>
      </view>
    </view>
    <view class="modal" v-if="showConfirmationModal">
        <view class="modal-content">
            <img class="pay" src="@/static/pay1.png" alt="pay">
            <button class="confirm" @click=" closeConfirmationModal">确认</button>
        </view>
    </view>
  </view>
</template>

<script>
export default {
data() {
    return {
      flowers: [
        { name: '穿心莲', image: '/static/chuan.png', price: 3 },
        { name: '葛根', image: '/static/ge.png', price: 8 },
        { name: '藿香', image: '/static/huo.png', price: 10 },
        { name: '罗汉果', image: '/static/luo.png',price:8},
        { name: '南非叶', image: '/static/nan.png',price:10},
        { name: '青葙子', image: '/static/qing.png',price:3},
      ],
   showModal: false,
      selectedFlower: null,
      quantity: 1,
       showConfirmationModal: false,
       remain:11
    };
  },
  methods: {
    buyFlower(flower) {
      // 设置选中的花朵，并显示弹窗
      this.selectedFlower = flower;
      this.showModal = true;
    },
confirmPurchase() {
    console.log('购买', this.selectedFlower.name, '数量:', this.quantity);
    const purchase = { flower: this.selectedFlower, quantity: this.quantity, remainingQuantity: this.remain };
    let purchases2 = uni.getStorageSync('purchases2') || [];
    
    // 检查所选花朵是否已在购买列表中
    const existingPurchaseIndex = purchases2.findIndex(item => item.flower.name === this.selectedFlower.name);
    if (existingPurchaseIndex !== -1) {
        // 如果花朵已经购买列表中，更新其数量
        purchases2[existingPurchaseIndex].quantity += this.quantity;
    } else {
        // 如果是新类型的花朵，将其添加到购买列表中
        purchases2.push(purchase);
    }

    uni.setStorageSync('purchases2', purchases2); // 存储更新后的购买列表
    this.showModal = false;
    this.showConfirmationModal = true;
},
    closeConfirmationModal() {
      this.showConfirmationModal = false;
      // 可以添加其他关闭逻辑
    },
    can在celPurchase() {
      // 取消购买，重置数据
      this.selectedFlower = null;
      this.quantity = 1;
      this.showModal = false;
    }
  },
 mounted() {
    // 在 mounted 钩子函数中打印 showModal 的值
    console.log('showModal 初始值:', this.showModal);
  },
}
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 376px;
  width: 100%;
 overflow: hidden; /* 隐藏溢出内容 */
}
.bac1{
    position: absolute;
    z-index: 0;
    height: 616px;
    width: 120%;
    right: -12px;
    margin-top: -100px;
}
.flower-item {
  position: relative;
  z-index: 1;
  height: 100px;
  width: 150px;
  left: 5%;
  margin-left: 30px;
}
.flower-image {
  position: relative;
  width: 100px;
  height: 100px;
}
.flower-info {
  position: relative;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);

  padding: 5px;
  border-radius: 5px;
}
.flower-name {
  font-size: 16px;
  color: #333;
}
.flower-price {
  font-size: 14px;

}
.buy-button {
  margin-top: 2px;
  height: auto;
  width: 75px;
  left: -20px;
  background-color: transparent; /* 背景色透明 */
  border: 4px solid #0e590e; /* 边框为绿色 */
  border-radius: 10px;
  line-height: 20px; /* 文本垂直居中 */
}
.modal {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  width: 300px;
  background-color:#c7924f;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.modal-content button {
  margin: 10px;
  background-color: transparent; /* 背景色透明 */
  border: 4px solid #0e590e; /* 边框为绿色 */
  border-radius: 15px;
  cursor: pointer;
  font-size: 20px;
}
.pay{
    height: 200px;
    width: 240px;
}
.confirm{
    width: 100px;
    height: 50px;
    left: 90px;
}
</style>